<template>
    <div class="add-node-types">
        <div class="node-type-wrap" @click="handleClick('approval')">
            <div class="node-type">
                <div class="node-type-icon">
                    <img class="undefined" src="../../assets/imgs/icon/flow/审批人.png">
                </div>
                <div class="node-type-name">审批</div>
            </div>
        </div>
        <div class="node-type-wrap" @click="handleClick('cc')">
            <div class="node-type">
                <div class="node-type-icon">
                    <img class="undefined" src="../../assets/imgs/icon/flow/抄送人.png">
                </div>
                <div class="node-type-name">抄送人</div>
            </div>
        </div>
        <div class="node-type-wrap" @click="handleClick('handle')">
            <div class="node-type">
                <div class="node-type-icon">
                    <img class="undefined" src="../../assets/imgs/icon/flow/办理人.png">
                </div>
                <div class="node-type-name">办理人</div>
            </div>
        </div>
        <div class="node-type-wrap" @click="handleClick('condition')">
            <div class="node-type">
                <div class="node-type-icon">
                    <img class="undefined" src="../../assets/imgs/icon/flow/条件分支.png">
                </div>
                <div class="node-type-name">条件分支</div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    methods:{
        handleClick(type){
            this.$emit('addFlowNode',type)
        }
    }
}
</script>
<style scoped>
.add-node-types {
    /* display: none; */
    position: absolute;
    top: -2px;
    left: 38px;
    width: 181px;
    background-color: #fff;
    color: #1f2329;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 3px;
    box-shadow: 0 8px 24px 8px rgba(31, 35, 41, .04), 0 6px 12px 0 rgba(31, 35, 41, .04), 0 4px 8px -8px rgba(31, 35, 41, .06);
    font-size: 14px;
    z-index: 999999;
    animation: fadeIn 0.06s ease-in-out forwards;
}

.add-node-types .node-type-wrap {
    line-height: 1.5;
    font-variant: tabular-nums;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
}

.add-node-types .node-type-wrap:hover {
    background-color: rgba(31, 35, 41, .08);
}

.add-node-types .node-type-wrap .node-type {
    display: flex;
}

.add-node-types .node-type-wrap .node-type .node-type-icon {
    width: 16px;
    margin-right: 8px;
}

.add-node-types .node-type-wrap .node-type img {
    width: 16px;
    position: absolute;
    top: 12px;
}
</style>